<template>
  <div class="container">
    <el-row style="margin-bottom: 10px;">
      <el-button :disabled="originTableData.length === 0" type="primary" :icon="downloadLoading ? 'el-icon-loading' : 'el-icon-document'" @click="handleDownload">导出Excel</el-button>
    </el-row>
    <el-table :header-cell-style="{ backgroundColor: '#f2f3f5', borderColor: '#C0C4CC', color: '#409EFF' }" :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="taskCode" label="任务号" min-width="120px" />
      <el-table-column align="center" prop="productName" label="产品名称" min-width="105px" />
      <el-table-column align="center" prop="productCode" label="产品代号" min-width="105px" />
      <el-table-column align="center" prop="tolerance" label="误差要求" min-width="105px" />
      <el-table-column align="center" prop="detectionDataL" label="垂直度-左" min-width="110px" />
      <el-table-column align="center" prop="detectionDataR" label="垂直度-右" min-width="110px" />
      <el-table-column align="center" prop="holeOffsetData" label="孔偏移量" min-width="105px" />
      <el-table-column align="center" prop="detectionD" label="外径" min-width="85px" />
      <el-table-column align="center" prop="detectionResult" label="检测结果" min-width="105px" />
      <el-table-column :formatter="formatterTime" align="center" prop="detectionDate" label="检测日期" min-width="190px" />
      <el-table-column align="center" prop="detectionOperator" label="检测人员" min-width="105px" />
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      style="float: right;margin-top: 10px;"
      layout="total, sizes, prev, pager, next"
      :total="totalCounts"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getRecordList } from '@/api/query'
export default {
  name: 'ProductionData',
  data() {
    return {
      tableData: [],
      originTableData: [],
      currentPage: 1,
      pageSize: 10,
      totalCounts: 0,
      downloadLoading: false
    }
  },
  created() {
    this.getRecordList()
  },
  methods: {
    getRecordList() {
      getRecordList().then(res => {
        this.originTableData = res
        this.totalCounts = this.originTableData.length
        this.currentPage = 1
        this.handleCurrentChange(1)
      })
    },
    handleSizeChange(size) {
      this.currentPage = 1
      this.handleCurrentChange(1)
    },
    handleCurrentChange(page) {
      this.tableData = this.originTableData.slice((page - 1) * this.pageSize, page * this.pageSize)
    },
    formatterTime(row, column, cellValue) {
      if (cellValue) {
        return new Date(cellValue).toLocaleString().replace(/\//g, '-')
      }
    },
    handleDownload() {
      this.downloadLoading = true
      const headerMap = {
        '任务号': 'taskCode',
        '产品名称': 'productName',
        '产品代号': 'productCode',
        '误差要求': 'tolerance',
        '垂直度-左': 'detectionDataL',
        '垂直度-右': 'detectionDataR',
        '综合垂直度': 'detectionData',
        '孔偏移量': 'holeOffsetData',
        '外径': 'detectionD',
        '检测结果': 'detectionResult',
        '检测日期': 'detectionDate',
        '检测人员': 'detectionOperator'
      }
      const header = Object.keys(headerMap)
      const data = []
      this.originTableData.forEach(item => {
        const row = []
        header.forEach(h => {
          if (h === '检测日期') {
            let time = item[headerMap[h]]
            if (time) {
              time = new Date(time).toLocaleString().replace(/\//g, '-')
            }
            row.push(time)
          } else {
            row.push(item[headerMap[h]])
          }
        })
        data.push(row)
      })
      import('@/utils/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header,
          data,
          filename: '生产数据',
          autoWidth: true,
          bookType: 'xlsx'
        })
        setTimeout(() => {
          this.downloadLoading = false
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0px;
}
.el-table {
  border-color: #C0C4CC;
  border-bottom: 1px solid #C0C4CC;
  ::v-deep {
    th>.cell {
      font-size: 20px;
    }
    td>.cell {
      font-size: 18px;
    }
  }
}
.el-pagination {
  ::v-deep {
    .el-pagination__total, i.el-icon  {
      font-size: 18px;
    }
    .el-input__inner {
      font-size: 16px;
    }
    .el-pager li {
      font-size: 18px;
    }
  }
}
</style>
